<template>
	<sysJk :label="(examType==1?'1':'3') +'.消防设备末端配电装置工作状态判断'" showBack :withoutTop="true" :leftTime="90">
		<template v-slot:content>
			<view class="warp" id="warp" @touchmove.stop="()=>{}">
				<view class="taskTit" style="width:100%;text-align: left;font-size: 2.5vh;" v-if="examType==1">
					{{questionList[showQuestion-1]}}
				</view>
				<view class="taskTit" style="width:100%;text-align: left;font-size: 2.5vh;" v-else>
					{{testQuestionList[showQuestion-1]}}
				</view>
				<view class="innerContent" style="position:relative;width:100%;height:100%">
					<image :src="bUrl"  style="width:100%;height:100%;display: block;">
					</image>
					<view class="myCard" id="myCard">
						<view class="cardContent">
							
							<view class="handleBtn">
								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="lastTask">上一题</u-button> -->
								<u-button 
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}" v-if="examType==1" @click="showFlag=true">查看解析</u-button>
								<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="nextTask">下一题</u-button> -->
							</view>
							<view class="btnArea">
								<u-button 
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
									@click="handle">提交</u-button>
								<u-button 
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="redo">重做</u-button>
								<u-button 
									:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',background:'#1E90FF',color:'#fff',fontSize:'3vh'}" @click="goBack">返回</u-button>
							</view>
							<view class="writeBox" id="writeBox" :style="{left:writeBoxLeft,top:writeBoxTop}"
								@tap="showDialog" v-if="showPic==1">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix" style="width:20px"></image>
							</view>
							<view class="writeBox" id="writeBox" :style="{right:'30px',top:'60px'}"
								@tap="back1" v-if="showPic==2||showPic==3">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix" style="width:20px"></image>
							</view>
							<view class="answerBox" v-if="showQuestion==1" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									判断双电源自动转换开关当前控制状态
								</view>
								<view class="answerSelect">
					
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==2" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									判断当前电源工作状态
								</view>
								<view class="answerSelect">
							
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items2"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==3" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									判断双电源自动转换开关当前控制状态
								</view>
								<view class="answerSelect">
												
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="answerBox" v-if="showQuestion==4" :style="{width:345*widthBl-35+'px'}">
								<view class="answerTit">
									判断当前电源工作状态
								</view>
								<view class="answerSelect">
							
									<radio-group @change="onChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="item in items2"
											:key="item.value" style="display: flex;margin-bottom: 5px;align-items: center;">
											<view>
												<radio :value="item.value" :checked="result==item.value" :style="{transform:'scale('+heightBl+')'}"/>
											</view>
											<view>{{item.name}}</view>
										</label>
									</radio-group>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			
				
				<u-mask :show="showFlag" @click="onClickHide">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block" style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle">
								【试题解析】 正确答案
							</view>
							<view class="overtitle">
								{{analysList[showQuestion-1]}}
							</view>
							<view class="overtitle">
								正确答案：<text v-if="showQuestion==1">自动控制状态</text> <text v-else-if="showQuestion==2">备电工作状态</text> <text v-else-if="showQuestion==3">手动控制状态</text>  <text v-else-if="showQuestion==4">主电工作状态</text> 
							</view>
						</view>
					</view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>

<script>
	import sysJk from '@/components/sysJk.vue'
	import {fzQuestion} from '@/globalApi/requestApi.js'
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	export default {
		components: {
			sysJk
		},
		
		data() {


			return {
				// widthBl:0,
				// heightBl:0,
				examType:1,
				writeBox:{width:0,height:0},
				writeBoxLeft: 0,
				writeBoxTop: 0,
				widthBl: 0,
				heightBl: 0,
				showFlag: false, 
				showWrite: true,
				bUrl: baseUrl + "/static/image/jk/3-1.jpg",
				showPic: 1,
				result: '',
				showQuestion: 1,
				questionList: [
					'【1/4】判断双电源自动转换开关当前控制状态',
					'【2/4】消防末端配电装置，判断当前电源工作状态',
					'【3/4】判断双电源自动转换开关当前控制状态',
					'【4/4】消防末端配电装置，判断当前电源工作状态',
					
				],
				testQuestionList:[
					'【1/2】判断双电源自动转换开关当前控制状态',
					'【2/2】消防末端配电装置，判断当前电源工作状态',
				],
				items: [{
						name: '手动控制状态',
						value: '手动控制状态',
					},
					{
						name: '自动控制状态',
						value: '自动控制状态',
					}
				],
				items2: [{
						name: '主电工作状态',
						value: '主电工作状态',
					},
					{
						name: '备电工作状态',
						value: '备电工作状态',
					}
				],
				analysList:[
					'判断手动还是自动装置状态，需要开打柜门，直接观察双电源转换开关的手自动状态',
					'常用电源合闸灯点亮，即为主动工作状态，备用电源合闸灯点亮，即为备电工作状态，注意观察中间手柄的白色箭头。',
					'判断手动还是自动装置状态，需要开打柜门，直接观察双电源转换开关的手自动状态',
					'常用电源合闸灯点亮，即为主动工作状态，备用电源合闸灯点亮，即为备电工作状态，注意观察中间手柄的白色箭头。',
				],
				isCorrect:true,
				allScore:0
			}
		},
		onLoad(option) {
			this.examType = option.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('#warp')
			// writeBox.boundingClientRect(data => {
			// 	this.writeBox = data
			// }).exec()
		},
		onReady() {
			this.$nextTick(function(){
				this.drawWhiteBox()
			})
		},
		methods: {
			redo(){
				this.result = ''
				if(this.showQuestion==1||this.showQuestion==3){
					this.bUrl= baseUrl + "/static/image/jk/3-1.jpg"
					this.showPic= 1
				}else{
					this.bUrl = baseUrl + "/static/image/jk/3-3.jpg"
					this.showPic = 1
				}
			},
			goBack(){
				uni.navigateBack()
			},
			back1(){
				if(this.showQuestion==1||this.showQuestion==3){
					this.bUrl = baseUrl + "/static/image/jk/3-1.jpg"
					this.showPic = 1
				}else{
					this.bUrl = baseUrl + "/static/image/jk/3-3.jpg"
					this.showPic = 1
				}
				
			},
			handle() {
				let that = this
				if(!that.result){
					uni.showToast({
						title:'请选择答案',
						icon:'none'
					})
					return
				}
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
				
							let score = 0
							let isCorrect = false
							if(that.showQuestion==1){
								if(that.result == that.items[1].value){
									score=2
									isCorrect = true
								}
							}else if(that.showQuestion==2){
								if(that.result == that.items2[1].value){
									score=2
									isCorrect = true
								}
							}
							// else if(that.showQuestion==3){
							// 	if(that.result == that.items[0].value){
							// 		score=1
							// 		isCorrect = true
							// 	}
							// }else if(that.showQuestion==4){
							// 	if(that.result == that.items2[0].value){
							// 		score=1
							// 		isCorrect = true
							// 	}
							// }
							let handleData = {
								fz_id: that.examId,
								title: that.showQuestion==1?'判断双电源自动转换开关当前控制状态':'消防末端配电装置，判断当前电源工作状态',
								no: '3-'+that.showQuestion,
								question_type: 1,
								user_answer: that.result,
								answer: '',
								is_correct: isCorrect,
								score: score,
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							fzQuestion(handleData).then(res => {
								if (res.code == 200) {
									that.allScore += score
									that.result = null
									if(that.examType==1){
										if (that.showQuestion == 1) {
											that.showQuestion += 1
											that.bUrl = baseUrl + "/static/image/jk/3-3.jpg"
											that.showPic = 1
										}
										else if (that.showQuestion == 2) {
											that.showQuestion += 1
											that.bUrl= baseUrl + "/static/image/jk/3-1.jpg"
											that.showPic= 1
										}else if (that.showQuestion == 3) {
											that.showQuestion += 1
											that.bUrl = baseUrl + "/static/image/jk/3-3.jpg"
											that.showPic = 1
										}else if (that.showQuestion == 4) {
											let pages = getCurrentPages()
											let prevPage = pages[pages.length -2] 
											prevPage.$vm.addScore(that.allScore)
											prevPage.$vm.status3 = true
											uni.navigateBack()
										}
									}else{
										if (that.showQuestion == 1) {
											that.showQuestion += 1
											that.bUrl = baseUrl + "/static/image/jk/3-3.jpg"
											that.showPic = 1
										}else  {
											let pages = getCurrentPages()
											let prevPage = pages[pages.length -2] 
											prevPage.$vm.addScore(that.allScore)
											prevPage.$vm.status3 = true
											uni.navigateBack()
										}
									}
									
								}
							})
						
					
				});
			},
			onChange(e) {
				this.result = e.detail.value
			},
			showDialog() {
				if(this.showQuestion==1){
					this.bUrl = baseUrl + "/static/image/jk/3-2.jpg"
					this.showPic = 2
				}else if(this.showQuestion==2){
					this.bUrl = baseUrl + "/static/image/jk/3-4.jpg"
					this.showPic = 3
				}else {
					this.bUrl = baseUrl + "/static/image/wb/14-11.jpg"
					this.showPic = 3
				}
				// this.showFlag = true
				
			},
			onClickHide() {
				this.showFlag = false
			},
			drawWhiteBox() {
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard')
				warp.boundingClientRect(data => {
					var widthBl = data.width / 1920
					var heightBl = data.height / 921
					that.widthBl = widthBl
					that.heightBl = heightBl
					that.writeBox.width = 100 * widthBl + 'px'
					that.writeBoxLeft = 900 * widthBl + 'px'
					that.writeBoxTop = 420 * heightBl + 'px'
					console.log(heightBl)
					that.writeBox.height = 100 * heightBl + 'px'
				}).exec()

				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			},
			nextTask() {
				uni.navigateTo({
					url: '../jkD/jkD'
				})
			},
			lastTask() {
				uni.navigateBack()
			}
		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;

		.myCard {
			width: 100%;
			height:100%;
			position: absolute;
			left:0;top:0;
			// border-radius: 20rpx;
			// overflow: hidden;
			// z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				// z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				.taskTit {
					width: 100%;
					text-align: left;
					background: #fff;
					color: #000
				}

				.handleBtn {
					position: fixed;
					left: 30px;
					bottom: 0px
				}

				.btnArea {
					margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position: fixed;
					right: 30px;
					bottom: 0px // text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			// border: 1px solid green;
			width: 100px;
			height: 100px;
			position: absolute;
			display:flex;
			align-items: center;
			justify-content: center;
		}

		.answerBox {
			position: absolute;
			left: 35px;
			top: 0%;
			background: #fff;
			color: #000;
			// width: 20%;
			font-size:2vh;
			.answerTit {
				background: orange
			}
		}

		.answerSelect {
			padding: 10px 0;
			box-sizing: border-box;
		}

		
	}
</style>